<header class="g-header" data-theme="{{ site.theme-color }}">
    <div class="g-logo">
      <a href="{{ "/" | relative_url }}" aria-label="logo"></a>
    </div>
    <!-- <i id="menu-toggle" class="iconfont icon-menu"></i> -->
    <div id="mode-toggle">
        <svg class="icon icon-day" aria-hidden="true">
            <use xlink:href="#icon-day"></use>
        </svg>
        <svg class="icon icon-night" aria-hidden="true">
            <use xlink:href="#icon-night"></use>
        </svg>
    </div>
    <svg id="menu-toggle" class="icon-menu" aria-hidden="true">
        <use xlink:href="#icon-menu"></use>
    </svg>
    <nav class="g-nav">
        <ul>
            {% for i in site.nav %}
                {% if i[1].first %}
                <li class="dropdown">
                    <a class="dropdown-toggle"> {{ i[0] }} </a>
                    <ul class="dropdown-menu">
                    {% for j in i[1] %}
                        <li>
                            <a href="{{ j[1] | relative_url}}" aria-label="{{ j[0] }}">
                                {{ j[0] }}
                            </a>
                        </li>
                    {% endfor %}
                    </ul> 
                </li>
                {% else %}
                <li>
                    <a href="{{ i[1] | relative_url}}" aria-label="{{ i[0] }}">
                        {{ i[0] }}
                    </a>
                </li>
                {% endif %}
            {% endfor %}
            <li class="mode">
                <svg class="icon day" aria-hidden="true">
                    <use xlink:href="#icon-day"></use>
                </svg>
                <svg class="icon night" aria-hidden="true">
                    <use xlink:href="#icon-night"></use>
                </svg>
            </li>
        </ul>
    </nav>
</header>
